<template>
  <div id="p3-contractBill">
    <div class="p3-title">
      <img src="../../assets/img/heyuezhangdantitle.png" alt />
      <div>
        <p>合约账单</p>
        <p>查询合约账单记录</p>
      </div>
    </div>
    <div class="p3-type">
      <span>类型</span>
      <el-select clearable size="small" v-model="type" placeholder="请选择">
        <el-option v-for="(v,i) in typeList" :key="i" :label="v.value" :value="v.code"></el-option>
      </el-select>
    </div>
    <el-table
          v-loading="load"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-if="token!=''"
          :data="list"
          stripe
          style="width: 100%"
          size="mini"
         >
          <el-table-column prop="id" label="流水号" min-width="80"></el-table-column>
          <el-table-column prop="recordName" label="类型" min-width="80"></el-table-column>
          <el-table-column prop="changeAvailable" label="可用" min-width="120">
              <template slot-scope="scope">
                  <span>{{scope.row.beforeAvailable}}</span> / <span style="color:#DCB884">{{scope.row.afterAvailable}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="changeFreeze" label="冻结" min-width="100">
              <template slot-scope="scope">
                  <span>{{scope.row.beforeFreeze}}</span> / <span style="color:#DCB884">{{scope.row.afterFreeze}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="createTime" label="时间" min-width="120"></el-table-column>
 
        </el-table>
        <el-pagination
      @current-change="nextPage"
      style="text-align:center;margin-top:20px;"
      small
      layout="prev, pager, next"
      :total="total"
      :page-size="8"
    ></el-pagination>
  </div>
</template>
<script>
import { contractWalletType , contractWalletRecord} from '../../api/api'
import { mapState } from 'vuex'
import qs from 'qs'
export default {
  name: "p3-contractBill",
  data() {
    return {
      type: "",
      typeList: [],
      load:false,
      list:[],
      page:1,
      total:10,
    };
  },
  watch:{
     type(){
         this.getRecord();
     }
  },
  computed:{
      ...mapState(['token'])
  },
  created(){
      this.getfinanceType();
      // this.getRecord();
  },
  methods:{
      //获取财务记录类型
      getfinanceType(){
          var params = {
              token:this.token
          }
          contractWalletType(qs.stringify(params)).then(res=>{
              this.typeList = res.data.data
              // console.log(this.typeList)
          })
      },
      //获取账单
      getRecord(){
          this.load = true
          var params = {
              page:this.page,
              rows:8,
              token:this.token,
              type:this.type
          }
          contractWalletRecord(qs.stringify(params)).then(res=>{
              this.load = false
              this.list = res.data.data
              this.total = res.data.count
              // console.log(this.list,33)
          })
      },
      //分页
      nextPage(val) {
      this.page= val;
      this.getRecord();
    },
  }
};
</script>
<style lang='less' scope>
#p3-contractBill {
  .p3-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  .p3-type {
    margin-top: 15px;
    padding-bottom: 20px;
    border-bottom: 10px solid #F7F8F8;
    span {
      font-size: 14px;
      color: #a1b1b0;
      margin-right: 10px;
    }
  }
}
</style>